import React from 'react';
// import { render } from 'react-dom';
import Header from './components/header';
import Player from './container/player';
import MusicList from './container/musicList';
// import { MUSIC_LIST } from './config/musiclist';
import {BrowserRouter as Router, Route} from 'react-router-dom';

class Root extends React.Component {
  constructor(props) {
    super(props)
    // this.state = {
    //   // 歌曲列表
    //   musicItem: MUSIC_LIST[0],
    //   musicList: MUSIC_LIST,
    // }
    //this.playMusic = this.playMusic;
    const { dispatch, PlayerStatus } = this.props
  }
  // 播放音乐
  playMusic() {
      $('#player').jPlayer('setMedia', {
        mp3: this.state.musicItem.file
      })
  }
  // 组件加载完执行...
  componentDidMount() {
    $('#player').jPlayer({
      supplied: 'mp3',
      wmode: 'window'
    });
    // 播放音乐
    this.playMusic();
  }

  render() {
    const Home = () => {
      return(
        <Player musicItem={this.state.musicItem} />
      )
    };
    const List = () => {
      return(
        <MusicList
          musicItem={this.state.musicItem}
          musicList={this.state.musicList}
        />
      )
    };

    return (

      <Router>
        <div>
          <Header/>
          <Route exact path="/" component={Home}/>
          <Route path="/list" component={List}/>
        </div>
      </Router>
    )
  }
}

export default Root;
